<template>
  <div>
    <el-header style="background-color: #a5e8cc">{{ selectNode }} EOS 连接配置</el-header>
    <el-form :model="eos" label-width="110px" class="eos_form">
      <el-row>
        <el-col :span="6">
          <div class="eos_div">
            <el-form-item label="连接名称">
              <el-input v-model="eos['create-eos-connection'].input['connection-name']"></el-input>
            </el-form-item>
            <el-form-item label="业务类型">
              <el-select v-model="eos['create-eos-connection'].input['service-type']" placeholder="请选择连接类型">
                <el-option label="EPL" value="EPL"></el-option>
                <el-option label="EVPL" value="EVPL"></el-option>
              </el-select>
            </el-form-item>

            <el-collapse v-model="activeItem" style="border:none;margin-left:30px;">
              <el-collapse-item name="1">
                <template slot="title">
                  <p class="title">EoS属性</p>
                </template>
                <el-form-item label="sdh信号类型">
                  <el-input v-model="eos['create-eos-connection'].input['eos-pac']['sdh-signal-type']"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="VC类型">
                  <el-input v-model="eos['create-eos-connection'].input['eos-pac']['vc-type']"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="VC占用列表">
                  <el-input v-model="eos['create-eos-connection'].input['eos-pac']['mapping-path']"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="lcas">
                  <el-input v-model="eos['create-eos-connection'].input['eos-pac'].lcas" autocomplete="off"></el-input>
                </el-form-item>
                <!-- suffix属性在 input 尾部，prefix属性在 input首部-->
                <el-form-item label="延迟">
                  <el-input v-model="eos['create-eos-connection'].input['eos-pac']['hold-off']" autocomplete="off">
                    <i slot="suffix" style="margin-right: 10px;">ms</i>
                  </el-input>
                </el-form-item>
                <el-form-item label="wtr">
                  <el-input v-model="eos['create-eos-connection'].input['eos-pac'].wtr" autocomplete="off">
                    <i slot="suffix" style="margin-right: 10px;">s</i>
                  </el-input>
                </el-form-item>
                <el-form-item label="tsd">
                  <el-input v-model="eos['create-eos-connection'].input['eos-pac'].tsd" autocomplete="off"></el-input>
                </el-form-item>
              </el-collapse-item>

              <el-collapse-item name="2">
                <template slot="title">
                  <p class="title">请求带宽</p>
                </template>
                <el-form-item label="TDM">
                  <el-input type="number"
                            v-model="eos['create-eos-connection'].input['requested-capacity']['total-size']"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="cbs">
                  <el-input type="number" v-model="eos['create-eos-connection'].input['requested-capacity'].cbs"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="cir">
                  <el-input type="number" v-model="eos['create-eos-connection'].input['requested-capacity'].cir"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="ebs">
                  <el-input v-model="eos['create-eos-connection'].input['requested-capacity'].ebs"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="eir">
                  <el-input v-model="eos['create-eos-connection'].input['requested-capacity'].eir"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-collapse-item>

              <el-collapse-item name="3">
                <template slot="title">
                  <p class="title">主用NNI</p>
                </template>
                <el-form-item label="端口名称">
                  <el-input v-model="eos['create-eos-connection'].input['primary-nni']['nni-ptp-name']"
                            autocomplete="off"
                            placeholder="线路侧物理端口名称"></el-input>
                </el-form-item>
                <el-form-item label="时隙信息">
                  <el-input v-model="eos['create-eos-connection'].input['primary-nni']['nni-ts-detail']"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="适配类型">
                  <el-select v-model="eos['create-eos-connection'].input['primary-nni']['adaptation-type']"
                             placeholder="请选择适配类型">
                    <el-option
                        v-for="(i,index) in adaptationType"
                        :key="index"
                        :value="i">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="交换能力">
                  <el-select v-model="eos['create-eos-connection'].input['primary-nni']['switch-capability']" clearable
                             placeholder="请选择交换能力">
                    <el-option
                        v-for="(i,index) in switchType"
                        :key="index"
                        :value="i">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-collapse-item>
              <el-collapse-item name="4">
                <template slot="title">
                  <p class="title">备用NNI</p>
                </template>
                <el-form-item label="端口名称">
                  <el-input v-model="eos['create-eos-connection'].input['secondary-nni']['nni-ptp-name']"
                            autocomplete="off"
                            placeholder="线路侧物理端口名称"></el-input>
                </el-form-item>
                <el-form-item label="时隙信息">
                  <el-input v-model="eos['create-eos-connection'].input['secondary-nni']['nni-ts-detail']"
                            autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="适配类型">
                  <el-select v-model="eos['create-eos-connection'].input['secondary-nni']['adaptation-type']"
                             placeholder="请选择适配类型">
                    <el-option
                        v-for="(i,index) in adaptationType"
                        :key="index"
                        :value="i">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="交换能力">
                  <el-select v-model="eos['create-eos-connection'].input['secondary-nni']['switch-capability']"
                             clearable
                             placeholder="请选择交换能力">
                    <el-option
                        v-for="(i,index) in switchType"
                        :key="index"
                        :value="i">
                    </el-option>
                  </el-select>
                </el-form-item>

              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="eos_eth_div">
            <el-divider><span style="color: #409EFF"><b>（当点击添加此业务时再出现）eth-uni 建立以太网业务</b></span>
            </el-divider>
            <el-form-item label="用户侧端口名称">
              <el-input v-model="eos['create-eos-connection'].input['eth-uni']['uni-ptp-name']" clearable
                        autocomplete="off"></el-input>
            </el-form-item>
            <div class="eos_div">
              <el-divider content-position="left">client-vlan</el-divider>
              <el-form-item label="vlan-id">
                <el-input type="number"
                          v-model="eos['create-eos-connection'].input['eth-uni']['client-vlan-spec']['vlan-id'][0]"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="访问操作">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['client-vlan-spec']['access-action']"
                           clearable
                           placeholder="请选择访问操作类型">
                  <el-option label="KEEP" value="KEEP"></el-option>
                  <el-option label="PUSH_POP" value="PUSH_POP"></el-option>
                  <el-option label="EXCHANGE" value="EXCHANGE"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="优先级">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['client-vlan-spec']['vlan-priority']"
                           clearable
                           placeholder="请选择优先级">
                  <el-option
                      v-for="(i,index) in vlanPriority"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['client-vlan-spec']['vlan-type']"
                           clearable
                           placeholder="请选择Vlan类型">
                  <el-option label="c-tag" value="0"></el-option>
                  <el-option label="s-tag" value="1"></el-option>
                  <el-option label="un-tag" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="eos_div">
              <el-divider content-position="left">uni-vlan</el-divider>
              <el-form-item label="vlan-id">
                <el-input v-model="eos['create-eos-connection'].input['eth-uni']['uni-vlan-spec']['vlan-id'][0]"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="访问操作">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['uni-vlan-spec']['access-action']"
                           clearable
                           placeholder="请选择访问操作类型">
                  <el-option label="KEEP" value="KEEP"></el-option>
                  <el-option label="PUSH_POP" value="PUSH_POP"></el-option>
                  <el-option label="EXCHANGE" value="EXCHANGE"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="优先级">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['uni-vlan-spec']['vlan-priority']"
                           clearable
                           placeholder="请选择优先级">
                  <el-option
                      v-for="(i,index) in vlanPriority"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['uni-vlan-spec']['vlan-type']"
                           clearable placeholder="请选择Vlan类型">
                  <el-option label="c-tag" value="0"></el-option>
                  <el-option label="s-tag" value="1"></el-option>
                  <el-option label="un-tag" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="eos_div">
              <el-divider content-position="left">ftp-vlan</el-divider>
              <el-form-item label="vlan-id">
                <el-input v-model="eos['create-eos-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-id'][0]"
                          autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="访问操作">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['ftp-vlan-spec']['access-action']"
                           clearable
                           placeholder="请选择访问操作类型">
                  <el-option label="KEEP" value="KEEP"></el-option>
                  <el-option label="PUSH_POP" value="PUSH_POP"></el-option>
                  <el-option label="EXCHANGE" value="EXCHANGE"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="优先级">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-priority']"
                           clearable
                           placeholder="请选择优先级">
                  <el-option
                      v-for="(i,index) in vlanPriority"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="eos['create-eos-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-type']"
                           clearable placeholder="请选择Vlan类型">
                  <el-option label="c-tag" value="0"></el-option>
                  <el-option label="s-tag" value="1"></el-option>
                  <el-option label="un-tag" value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-col>
      </el-row>


      <el-form-item>
        <el-image
            style="width: 20px; height: 25px;"
            :src="require('@/assets/union_rule_font.jpg')"
            :preview-src-list="[require('@/assets/union/EOS交叉连接.png')]">
        </el-image>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>

    </el-form>


  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "Eos",
  data() {
    return {
      selectNode: '',
      activeItem: '0',
      vlanPriority: [0, 1, 2, 3, 4, 5, 6, 7],
      //适配类型 默认使用GFP-F
      adaptationType: ['CBR_AMP', 'CBR_BMP', 'GFP-T', 'GFP-F', 'NULL', 'PRBS', 'CBRx', 'CBRX_GMP', 'ODUij', 'ODUj21', 'ODUk ', 'unknown'],
      //交换能力
      switchType: ['ODU0', 'ODU1', 'ODU2', 'ODU2e', 'ODU3', 'ODU4', 'ODUflex-GFP', 'ODUflex-CBR'],
      eos: {
        "create-eos-connection": {
          "input": {
            "connection-name": "CONNECTION=ETH1",
            "service-type": "EVPL",
            "layer-protocol-name": "ETH",
            "requested-capacity": {
              "total-size": "4",
              "cbs": "1",
              "cir": "1",
              "ebs": "1",
              "eir": "1"
            },
            "eos-pac": {
              "sdh-signal-type": "STM4",
              "vc-type": "VC3",
              "mapping-path": "ODU1",
              "lcas": "true",
              "hold-off": "300",
              "wtr": "50000",
              "tsd": "true"
            },
            "eth-uni": {
              "uni-ptp-name": "a",
              "client-vlan-spec": {
                "vlan-id": [
                  "1"
                ],
                "vlan-priority": "1",
                "access-action": "push_pop",
                "vlan-type": "s-tag"
              },
              "uni-vlan-spec": {
                "vlan-id": [
                  "2"
                ],
                "vlan-priority": "1",
                "access-action": "keep",
                "vlan-type": "s-tag"
              },
              "ftp-vlan-spec": {
                "vlan-id": [
                  "1"
                ],
                "vlan-priority": "1",
                "access-action": "exchange",
                "vlan-type": "un-tag"
              }
            },
            "primary-nni": {
              "nni-ptp-name": "a",
              "nni-ts-detail": "a",
              "adaptation-type": "CBR_AMP",
              "client-signal-type": "1",
              "switch-capability": "1"
            },
            "secondary-nni": {
              "nni-ptp-name": "1",
              "nni-ts-detail": "1",
              "adaptation-type": "CBR_AMP",
              "client-signal-type": "1",
              "switch-capability": "1"
            },
          }
        }

      },

    }
  },
  methods: {
    submitForm() {

      console.log(JSON.stringify(this.eos))
      axios.post("/node/" + this.selectNode + "/create_connection/eos", {context: JSON.stringify(this.eos)}).then(
          response => {
            console.log("创建eos成功", response.data);
            this.$message.success("创建eos成功" + response.data);
          },
          error => {
            console.log("错误：", error.message);
            this.$message.error(error.message);
          }
      )
    },
    resetForm() {

    }
  },
  mounted() {

    this.$bus.$on('node-name', (data) => {
      console.log("收到的信息为： ", data)
      this.selectNode = data;
    })


  }

}
</script>

<style scoped>

.title {
  font-size: 15px;
  text-align: left;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
  margin-bottom: 2px;
  margin-left: 0;

}

el-divider {
  background-color: #b6d7fb;
  height: 2px;
}

.eos_div {
  width: 300px;
  height: auto;
  padding-left: 6px;
  margin-left: 6px;
  float: left;
  border: #1c86cd 1px solid;
}

.eos_eth_div {
  width: 942px;
  height: auto;
  padding: 6px 3px;
  margin-left: 6px;
  /*border: #d22020 1px solid;*/
}

.div el-form {
  label-width: "auto";
}

.el-form-item el-input {
  label-width: 246px;
}

.eos_form {
  margin-top: 6px;
}
</style>